<style lang="scss" scoped>
.box-card {
  background-color: #f2f2f2;
  border-radius: 10px;
  margin-left: 20px;
  text-align: center;
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="合同日期" prop="orderDate">
        <el-input v-model="queryParams.orderDate" placeholder="请输入合同日期" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="销售员" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入销售员" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="合同号" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入合同号" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="客户" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入客户" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单编号" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单类型" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入订单类型" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核级别" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入审核级别" clearable style="width: 180px;"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
   </el-row>
   
   <h2 align="center">销售订单列表</h2>
   
    <el-tooltip placement="top">
      <div slot="content">点击任意一行列，即可在下方查看明细信息记录</div>
      <el-table :data="orderdata" :row-class-name="rowClassName" v-loading="loading" hight="300" @row-click="showTab">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="合同日期" prop="contractDate" />
        <el-table-column align="center" label="销售员" prop="salesperson" />
        <el-table-column align="center" label="合同号" prop="Contract" />
        <el-table-column align="center" label="客户" prop="customer" />
        <el-table-column align="center" label="订单编号" prop="OrderNumber" />
        <el-table-column align="center" label="订单类型" prop="OrderType" />
        <el-table-column align="center" label="审核级别" prop="Auditlevel" />
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tooltip>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-tabs v-model="activeName" type="card" v-if="showCard">
      <el-tab-pane label="订单明细" name="first">
        <el-row>
          <el-col :span="12">
            <el-table :data="detailedData" @row-click="handleRowClick">
              <el-table-column prop="id" align="center" label="代号" />
              <el-table-column prop="name" align="center" label="名称" />
              <el-table-column prop="size" align="center" label="规格" />
              <el-table-column prop="company" align="center" label="单位" />
              <el-table-column prop="Packing" align="center" label="装箱数" />
              <el-table-column prop="quantity" align="center" label="数量" />
              <el-table-column prop="remarks" align="center" label="备注" />
            </el-table>
            <pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </pagination>
          </el-col>
          <el-col :span="12"  v-loading="loadingComm">
            <el-row>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: bold;">生产要求</span>
                  </div>
                  <el-input type="textarea" disabled resize="none" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
                    v-model="formComm.productionRequirements">
                  </el-input>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: bold;">生产工艺</span>
                  </div>
                  <el-input type="textarea" disabled :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
                    v-model="formComm.productionTechnique" width="100%">
                  </el-input>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: bold;">正唛</span>
                  </div>
                  <el-input type="textarea" disabled :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
                    v-model="formComm.frontmark">
                  </el-input>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: bold;">侧唛 </span>
                  </div>
                  <el-input type="textarea" disabled :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
                    v-model="formComm.sidemark" width="100%">
                  </el-input>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-tab-pane>

      <el-tab-pane label="订单BOM" name="second">
         <el-row :gutter="20">
            <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
              <pane size="32">
                <el-table :data="detailedData" v-loading="loading" @row-click="handleRowClick">
                  <el-table-column prop="id" align="center" label="代号" />
                  <el-table-column prop="name" align="center" label="名称" />
                  <el-table-column prop="size" align="center" label="规格" />
                  <el-table-column prop="company" align="center" label="单位" />
                  <el-table-column prop="Packing" align="center" label="装箱数" />
                  <el-table-column prop="quantity" align="center" label="数量" />
                  <el-table-column prop="remarks" align="center" label="备注" />
                </el-table>
                <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
                  :total="total" />
              </pane>
              <pane size="68">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" fixed="right" size="mini" @click="handleAddBOM">新增子件</el-button>
                  </el-col>
                  <el-col :span="18">
                   <div align="center"> {{ name }} 子件清单</div>
                  </el-col>
                </el-row>
            <el-table :data="BOMData" v-loading="loadingBOM" row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              @selection-change="handleSelectionChange">
              <el-table-column align="center" label="子件">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column prop="id" align="center" label="产品代号" />
                <el-table-column prop="name" align="center" label="产品名称" />
                <el-table-column prop="process" align="center" label="领用工序" />
                <el-table-column prop="attribute" align="center" label="属性" />
                <el-table-column prop="color" align="center" label="颜色" />
                <el-table-column prop="weight" align="center" label="单重" />
                <el-table-column prop="Specifications" align="center" label="规格" />
                <el-table-column prop="type" align="center" label="类型(物品类型)" />
                <el-table-column prop="mainUnit" align="center" label="用量" />
                <el-table-column prop="subUnit" align="center" label="副单位用量" />
                <el-table-column prop="lossRate" align="center" label="损耗率(%)" />
                <el-table-column prop="department" align="center" label="领用部门" />
                <el-table-column prop="edition" align="center" label="版本" />
              </el-table-column>
              <el-table-column align="center" label="操作" fixed="right" >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleAddBOM1(scope.row)">添加下级</el-button>
                  <el-button size="mini" type="text" @click="handleUpdateBOM(scope.row)">修改</el-button>
                  <el-button type="text"size="mini" @click="handleDeleteBOM(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
              :total="total" />
              </pane>
            </splitpanes>
         </el-row>
      </el-tab-pane>

      <el-tab-pane label="订单工艺" name="third">
        <el-row :gutter="20">
            <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
              <pane size="32">
                    <el-table :data="detailedData" v-loading="loading" @row-click="handleRowClick">
                      <el-table-column prop="id" align="center" label="代号" />
                      <el-table-column prop="name" align="center" label="名称" />
                      <el-table-column prop="size" align="center" label="规格" />
                      <el-table-column prop="company" align="center" label="单位" />
                      <el-table-column prop="Packing" align="center" label="装箱数" />
                      <el-table-column prop="quantity" align="center" label="数量" />
                      <el-table-column prop="remarks" align="center" label="备注" />
                    </el-table>
                    <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
                    :total="total" />
              </pane>
              <pane size="68">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddBOM">新增</el-button>
                    </el-col>
                  <el-col :span="18">
                    <div align="center"> {{ name }} 工艺顺序</div>
                  </el-col>
                  </el-row>
                  <el-table :data="techData" v-loading="loadingDatalied">
                    <el-table-column prop="id" align="center" label="加工顺序" />
                    <el-table-column prop="name" align="center" label="工序名称" />
                    <el-table-column prop="process" align="center" label="加工部门" />
                    <el-table-column prop="isAffect" align="center" label="是否 受上道工序影响" />
                    <el-table-column prop="preTech" align="center" label="上道工序" />
                    <el-table-column prop="price" align="center" label="加工价格" />
                    <el-table-column prop="scrapPrice" align="center" label="次品价格" />
                    <el-table-column prop="wastePrice" align="center" label="废品价格" />
                    <el-table-column prop="isFirst" align="center" label="是否首道投料" />
                    <el-table-column prop="isLast" align="center" label="是否末道工序" />
                    <el-table-column prop="eliminate" align="center" label="消除工序设置" />
                    <el-table-column prop="processAttributes" align="center" label="工序属性" />
                    <el-table-column prop="isKey" align="center" label="是否关键工序" />
                    <el-table-column prop="errorRate" align="center" label="误差率%" />
                    <el-table-column prop="remarks" align="center" label="备注" />
                    <el-table-column fixed="right" label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleUpdateTech(scope.row)">修改</el-button>
                        <el-button type="text"size="mini" @click="handleDeleteTech(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
                :total="total" />
              </pane>
            </splitpanes>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="订单物料" name="fourth">
        <el-row :gutter="20">
          <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
            <pane size="32">
              <el-table :data="detailedData" @row-click="handleRowClick" v-loading="loading">
                <el-table-column prop="id" align="center" label="代号" />
                <el-table-column prop="name" align="center" label="名称" />
                <el-table-column prop="size" align="center" label="规格" />
                <el-table-column prop="company" align="center" label="单位" />
                <el-table-column prop="Packing" align="center" label="装箱数" />
                <el-table-column prop="quantity" align="center" label="数量" />
                <el-table-column prop="remarks" align="center" label="备注" />
              </el-table>
              <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
              :total="total" />
            </pane>
            <pane size="68">
              <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddMaterial">新增</el-button>
              </el-col>
              <el-col :span="18">
                <div align="center"> {{ name }} 物料清单</div>
              </el-col>
            </el-row>
              <el-table :data="materialData" v-loading="loadingMaterial">
                <el-table-column prop="orderNumber" align="center" label="订单编号" />
                <el-table-column prop="contractNumber" align="center" label="合同号" />
                <el-table-column align="center" label="物品描述" >
                  <el-table-column prop="code" align="center" label="代号" />
                  <el-table-column prop="name" align="center" label="名称" />
                  <el-table-column prop="size" align="center" label="规格" />
                  <el-table-column prop="unit" align="center" label="单位" />
                </el-table-column>
                <el-table-column prop="color" align="center" label="颜色" />
                <el-table-column prop="attribute" align="center" label="属性" />
                <el-table-column prop="quantity" align="center" label="需求数量" />
                <el-table-column prop="isCustomer" align="center" label="是否 客供" />
                <el-table-column label="操作" fixed="right" width="100">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleUpdateMaterial(scope.row)">修改</el-button>
                    <el-button type="text"size="mini" @click="handleDeleteMaterial(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
              :total="total" />
            </pane>
          </splitpanes>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 订单表 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="合同日期" prop="contractDate">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.contractDate" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="销售员" prop="salesperson">
          <el-input v-model="form.salesperson" placeholder="请输入销售员" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="合同号" prop="Contract">
          <el-input v-model="form.Contract" placeholder="请输入合同号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="客户" prop="customer">
          <el-input v-model="form.customer" placeholder="请输入客户" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="订单编号" prop="OrderNumber">
          <el-input v-model="form.OrderNumber" placeholder="请输入订单号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="订单类型" prop="OrderType">
          <el-select v-model="form.OrderType" placeholder="请选择订单类型" style="width: 240px;" >
            <el-option label="销售订单" value="销售订单"></el-option>
            <el-option label="采购订单" value="采购订单"></el-option>
            <el-option label="委托加工订单" value="委托加工订单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核级别" prop="AuditLevel">
          <el-select v-model="form.AuditLevel" placeholder="请选择审核级别" style="width: 240px;">
            <el-option label="一级审批" value="一级审批"></el-option>
            <el-option label="二级审批" value="二级审批"></el-option>
            <el-option label="三级审批" value="三级审批"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    
    <!-- 订单明细 -->
     <el-dialog :title="titleComm" :visible.sync="openComm" width="500px" append-to-body>
       <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
         <el-form-item label="代号" prop="id">
           <el-input v-model="formComm.id" placeholder="请输入代号" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formComm.name" placeholder="请输入名称" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="规格" prop="size">
           <el-input v-model="formComm.size" placeholder="请输入规格" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="单位" prop="company">
           <el-input v-model="formComm.company" placeholder="请输入单位" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="装箱数" prop="Packing">
           <el-input v-model="formComm.Packing" placeholder="请输入装箱数" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="数量" prop="quantity">
           <el-input v-model="formComm.quantity" placeholder="请输入数量" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
           <el-input v-model="formComm.remarks" placeholder="请输入备注" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="生产要求" prop="productionRequirements">
           <el-input type="textarea" resize="none" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionRequirements">
            </el-input>
         </el-form-item>
         <el-form-item label="生产工艺" prop="productionTechnique">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionTechnique">
            </el-input>
         </el-form-item>
         <el-form-item label="正唛" prop="frontMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.frontMark">
            </el-input>
         </el-form-item>
         <el-form-item label="侧唛" prop="sideMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.sideMark"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormComm">确 定</el-button>
          <el-button @click="cancelComm">取 消</el-button>
      </div>
     </el-dialog>
     
     <!-- 订单BOM -->
      <el-dialog :title="titleBOM" :visible.sync="openBOM" width="800px" append-to-body>
         <el-form :model="formBOM" :rules="rulesBOM" ref="formBOM" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品代号" prop="id">
                <el-select v-model="formBOM.id" placeholder="请选择产品代号" style="width: 240px;">
                  <el-option label="BM-001" value="BM-001"></el-option>
                  <el-option label="BM-002" value="BM-002"></el-option>
                  <el-option label="BM-003" value="BM-003"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="name">
                <el-input v-model="formBOM.name" placeholder="请输入产品名称" style="width: 240px;" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="领用工序" prop="process">
                <el-input v-model="formBOM.process" placeholder="请输入领用工序" style="width: 240px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性" prop="attribute">
                <el-input v-model="formBOM.attribute" placeholder="请输入属性" style="width: 240px;" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="颜色" prop="color">
                <el-input v-model="formBOM.color" placeholder="请输入颜色" style="width: 240px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单重" prop="weight">
                <el-input v-model="formBOM.weight" placeholder="请输入单重" style="width: 240px;" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="规格" prop="Specifications">
                <el-input v-model="formBOM.Specifications" placeholder="请输入规格" style="width: 240px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-input v-model="formBOM.type" placeholder="请输入类型" style="width: 240px;" />
              </el-form-item>
            </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="用量" prop="mainUnit">
                  <el-input v-model="formBOM.mainUnit" placeholder="请输入用量" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="副单位用量" prop="subUnit">
                  <el-input v-model="formBOM.subUnit" placeholder="请输入副单位用量" style="width: 240px;" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="损耗率" prop="lossRate">
                  <el-input v-model="formBOM.lossRate" placeholder="请输入损耗率" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="领用部门" prop="department">
                  <el-input v-model="formBOM.department" placeholder="请输入领用部门" style="width: 240px;" />
                </el-form-item>
              </el-col>
              </el-row>
              
              <el-row>
                <el-col :span="12">
                  <el-form-item label="版本" prop="edition">
                    <el-input v-model="formBOM.edition" placeholder="请输入版本" style="width: 240px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上级产品代号" prop="parent" v-if="isParent">
                    <el-input v-model="formBOM.parent" placeholder="请输入上级产品代号" style="width: 240px;" />
                  </el-form-item>
                </el-col>
              </el-row>
          
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormBOM">确 定</el-button>
            <el-button @click="cancelBOM">取 消</el-button>
         </div>
      </el-dialog>
      
      <!-- 订单工艺 -->
       <el-dialog :title="titleTech" :visible.sync="openTech" width="800px" append-to-body>
         <el-form :model="formTech" :rules="rulesTech" ref="formTech" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="加工顺序" prop="id">
                <el-input v-model="formTech.id" placeholder="请输入加工顺序" style="width: 240px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工序名称" prop="name">
                <el-select v-model="formTech.name" placeholder="请选择工序名称" style="width: 240px;">
                  <el-option label="成型" value="成型"></el-option>
                  <el-option label="磨边" value="磨边"></el-option>
                  <el-option label="抛光" value="抛光"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="工序部门" prop="department">
                  <el-input v-model="formTech.department" placeholder="请输入工序部门" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否 受上道工序影响" prop="isAffect">
                  <el-select v-model="formTech.isAffect" placeholder="请选择是否 受上道工序影响" style="width: 240px;">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              </el-row>
              
              <el-row>
                <el-col :span="12">
                  <el-form-item label="上道工序" prop="preTech">
                    <el-select v-model="formTech.preTech" placeholder="请选择上道工序" style="width: 240px;">
                      <el-option label="成型" value="成型"></el-option>
                      <el-option label="磨边" value="磨边"></el-option>
                      <el-option label="抛光" value="抛光"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="加工价格" prop="price">
                    <el-input v-model="formTech.price" placeholder="请输入加工价格" style="width: 240px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row>
                <el-col :span="12">
                  <el-form-item label="次品价格" prop="scrapPrice">
                    <el-input v-model="formTech.scrapPrice" placeholder="请输入次品价格" style="width: 240px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="废品价格" prop="wastePrice">
                    <el-input v-model="formTech.wastePrice" placeholder="请输入废品价格" style="width: 240px;" />
                  </el-form-item>
                </el-col>
              </el-row>
                
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="是否首道投料" prop="isFirst">
                      <el-select v-model="formTech.isFirst" placeholder="请选择是否首道投料" style="width: 240px;">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否末道工序" prop="isLast">
                      <el-select v-model="formTech.isLast" placeholder="请选择是否末道工序" style="width: 240px;">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="消除工序设置" prop="eliminate">
                      <el-input style="width: 240px;" placeholder="请输入内容" v-model="formTech.eliminate" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工序属性" prop="processAttributes">
                      <el-input style="width: 240px;" placeholder="请输入内容" v-model="formTech.processAttributes" />
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="是否关键工序" prop="isKey">
                      <el-select v-model="formTech.isKey" placeholder="请选择是否关键工序" style="width: 240px;">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="误差率" prop="errorRate">
                      <el-input v-model="formTech.errorRate" placeholder="请输入误差率" style="width: 240px;" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col >
                    <el-form-item label="备注" prop="remarks">
                      <el-input type="textarea" rows="3" placeholder="请输入内容" v-model="formTech.remarks" />
                    </el-form-item>
                  </el-col>
                </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormTech">确 定</el-button>
            <el-button @click="cancelTech">取 消</el-button>
         </div>
       </el-dialog>
       
       <!--订单物料  -->
       <el-dialog :title="titleMaterial" :visible.sync="openMaterial" width="800px" append-to-body>
         <el-form :model="formMaterial" :rules="rulesMaterial" ref="formMaterial" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单编号" prop="orderNumber">
                  <el-input v-model="formMaterial.orderNumber" placeholder="请输入订单编号" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同号" prop="contractNumber">
                  <el-input v-model="formMaterial.contractNumber" placeholder="请输入合同号" style="width: 240px;" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="代号" prop="code">
                  <el-input v-model="formMaterial.code" placeholder="请输入代号" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="formMaterial.name" placeholder="请输入名称" style="width: 240px;" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="规格" prop="size">
                  <el-input v-model="formMaterial.size" placeholder="请输入规格" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位" prop="unit">
                  <el-input v-model="formMaterial.unit" placeholder="请输入单位" style="width: 240px;" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="颜色" prop="color">
                  <el-input v-model="formMaterial.color" placeholder="请输入颜色" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="属性" prop="attribute">
                  <el-input v-model="formMaterial.attribute" placeholder="请输入属性" style="width: 240px;" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="需求数量" prop="quantity">
                  <el-input v-model="formMaterial.quantity" placeholder="请输入需求数量" style="width: 240px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否 客供" prop="isCustomer">
                  <el-select v-model="formMaterial.isCustomer" placeholder="请选择是否 客供" style="width: 240px;">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormMaterial">确 定</el-button>
            <el-button @click="cancelMaterial">取 消</el-button>
         </div>
       </el-dialog>

  </div>

</template>

<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";


export default {
  components: { Splitpanes, Pane },
  data() {
    return {
       // 标题
      title:null,
      titleComm:null,
      titleBOM:null,
      titleTech:null,
      titleMaterial:null,
      // 总条数
      total:0,
      // 打开弹出框
      open:false,
      openComm:false,
      openBOM:false,
      openTech:false,
      openMaterial:false,
      // 表单
      form:{},
      formComm:{},
      formBOM:{},
      formTech:{},
      formMaterial:{},
      // 校验
      rules:{},
      rulesComm:{},
      rulesBOM:{},
      rulesTech:{},
      rulesMaterial:{},
      // 加载
      loadingComm:false,
      loadingDatalied:false,
      loadingBOM:false,
      loadingTech:false,
      loadingMaterial:false,
      
      
      orderdata: [{
        contractDate: '2021-01-01',
        salesperson: '张三',
        Contract: '2400111',
        customer: '客户1',
        OrderNumber: '20210101001',
        OrderType: '销售订单',
        AuditLevel: '一级审批',
      }],
      detailedData: [{
        id: '1',
        name: '产品1',
        size: '规格1',
        company: '单位1',
        Packing: '1',
        quantity: '1',
        remarks: '备注1',
        productionRequirements: '生产要求1',
        productionTechnique: '生产工艺1',
        frontmark: '前标记1',
        backmark: '后标记1',
      }, {
        id: '2',
        name: '产品2',
        size: '规格2',
        company: '单位2',
        Packing: '2',
        quantity: '2',
        remarks: '备注2',
        productionRequirements: '生产要求2',
        productionTechnique: '生产工艺2',
        frontmark: '前标记2',
        backmark: '后标记2',
      }, {
        id: '3',
        name: '产品3',
        size: '规格3',
        company: '单位3',
        Packing: '3',
        quantity: '3',
        remarks: '备注3',
        productionRequirements: '生产要求3',
        productionTechnique: '生产工艺3',
        frontmark: '前标记3',
        backmark: '后标记3'
      }, {
        id: '4',
        name: '产品4',
        size: '规格4',
        company: '单位4',
        Packing: '4',
        quantity: '4',
        remarks: '备注4'
      }, {
        id: '5',
        name: '产品5',
        size: '规格5',
        company: '单位5',
        Packing: '5',
        quantity: '5',
        remarks: '备注5'
      }, {
        id: '6',
        name: '产品6',
        size: '规格6',
        company: '单位6',
        Packing: '6',
        quantity: '6',
        remarks: '备注6'
      }, {
        id: '7',
        name: '产品7',
        size: '规格7',
        company: '单位7',
        Packing: '7',
        quantity: '7',
        remarks: '备注7'
      }],
      BOMData: [{
        id: 'BZ-YL-001',
        name: 'YL001白纸',
        process: '领用工序',
        attribute: '属性',
        color: '颜色',
        weight: '单重',
        Specifications: '规格',
        type: '类型(物品类型)',
        mainUnit: '用量',
        subUnit: '副单位用量',
        lossRate: '损耗率(%)',
        department: '领用部门',
        edition: '版本',
        children: [{
          id: 'BZ-YL-001-001',
          name: 'YL001白纸-001',
          process: '领用工序',
          attribute: '属性',
          color: '颜色',
          weight: '单重',
          Specifications: '规格',
          type: '类型(物品类型)',
          mainUnit: '用量',
          subUnit: '副单位用量',
          lossRate: '损耗率(%)',
          department: '领用部门',
          edition: '版本'
        }]
      }, {
        id: 'BZ-YL-002',
        name: 'YL002白纸',
        process: '领用工序',
        attribute: '属性',
        color: '颜色',
        weight: '单重',
        Specifications: '规格',
        type: '类型(物品类型)',
        mainUnit: '用量',
        subUnit: '副单位用量',
        lossRate: '损耗率(%)',
        department: '领用部门',
        edition: '版本',
        children: [{
          id: 'BZ-YL-002-001',
          name: 'YL002白纸-001',
          process: '领用工序',
          attribute: '属性',
          color: '颜色',
          weight: '单重',
          Specifications: '规格',
          type: '类型(物品类型)',
          mainUnit: '用量',
          subUnit: '副单位用量',
          lossRate: '损耗率(%)',
          department: '领用部门',
          edition: '版本'
        }]
      }, {
        id: 'BZ-YL-003',
        name: 'YL003白纸',
        process: '领用工序',
        attribute: '属性',
        color: '颜色',
        weight: '单重',
        Specifications: '规格',
        type: '类型(物品类型)',
        mainUnit: '用量',
        subUnit: '副单位用量',
        lossRate: '损耗率(%)',
        department: '领用部门',
        edition: '版本',
        children: [{
          id: 'BZ-YL-003-001',
          name: 'YL003白纸-001',
          process: '领用工序',
          attribute: '属性',
          color: '颜色',
          weight: '单重',
          Specifications: '规格',
          type: '类型(物品类型)',
          mainUnit: '用量',
          subUnit: '副单位用量',
          lossRate: '损耗率(%)',
          department: '领用部门',
          edition: '版本'
        }]
      }, {
        id: 'BZ-YL-004',
        name: 'YL004白纸',
        process: '领用工序',
        attribute: '属性',
        color: '颜色',
        weight: '单重',
        Specifications: '规格',
        type: '类型(物品类型)',
        mainUnit: '用量',
        subUnit: '副单位用量',
        lossRate: '损耗率(%)',
        department: '领用部门',
        edition: '版本',
        children: [{
          id: 'BZ-YL-004-001',
          name: 'YL004白纸-001',
          process: '领用工序',
          attribute: '属性',
          color: '颜色',
          weight: '单重',
          Specifications: '规格',
          type: '类型(物品类型)',
          mainUnit: '用量',
          subUnit: '副单位用量',
          lossRate: '损耗率(%)',
          department: '领用部门',
          edition: '版本'
        }]
      }, {
        id: 'BZ-YL-005',
        name: 'YL005白纸',
        process: '领用工序',
        attribute: '属性',
        color: '颜色',
        weight: '单重',
        Specifications: '规格',
        type: '类型(物品类型)',
        mainUnit: '用量',
        subUnit: '副单位用量',
        lossRate: '损耗率(%)',
        department: '领用部门',
        edition: '版本',
      }],
      techData: [{
        id: '1',
        name: '成型',
        process: '成型工序',
        isAffect: '否',
        preTech: '',
        price: '100',
        scrapPrice: '50',
        wastePrice: '150',
        isFirst: '是',
        isLast: '否',
        eliminate: '消除工序设置',
        processAttributes: '工序属性',
        isKey: '是',
        errorRate: '误差率',
        remarks: '备注',
      },{
        id: '2',
        name: '磨边',
        process: '磨边工序',
        isAffect: '否',
        preTech: '成型',
        price: '100',
        scrapPrice: '50',
        wastePrice: '150',
        isFirst: '是',
        isLast: '否',
        eliminate: '消除工序设置',
        processAttributes: '工序属性',
        isKey: '是',
        errorRate: '误差率',
        remarks: '备注',
      }],
      materialData:[{
        orderNumber: '20210101001',
        contractNumber: '2400111',
        code: '123456',
        name: '白纸',
        size: 'A4',
        color: '6色平均混装',
        unit: '张',
        quantity: '1000',
        attribute: '属性',
        isCustomer: "否",
      }, {
        orderNumber: '20210101001',
        contractNumber: '2400111',
        code: '123456',
        name: '白纸',
        size: 'A4',
        color: '6色平均混装',
        unit: '张',
        quantity: '1000',
        attribute: '属性',
        isCustomer: "否",
      }, {
        orderNumber: '20210101001',
        contractNumber: '2400111',
        code: '123456',
        name: '白纸',
        size: 'A4',
        color: '6色平均混装',
        unit: '张',
        quantity: '1000',
        attribute: '属性',
        isCustomer: "否"
      }],
      showCard: false,
      textarea3: '6色平均混装',
      isEdit: false,
      form: {},
      rules: {},
      activeName: 'first',
      total: 50,
      showSearch: true,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      queryParams1:{
        pageNum: 1,
        pageSize: 10
      },
      isParent:false,
    }
  },
  methods: {
      //显示高亮
        rowClassName({ row }) {
          return row.OrderNumber === this.OrderNumber ? 'selected-row' : ''; // 判断是否选中
        },
    
    handleRowClick(row){
      this.name = row.name;
      this.loadingComm = true;
      this.loadingDatalied = true;
      this.loadingBOM = true;
      this.loadingTech = true;
      this.loadingMaterial = true;
      setTimeout(() => {
        this.formComm = row;
        this.loadingComm = false;
        this.loadingDatalied = false;
        this.loadingBOM = false;
        this.loadingTech = false;
        this.loadingMaterial = false;
      }, 1000); // 延迟1秒

    },
    
    handleSelectionChange(val) {
      console.log(val)
    },
    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
    resetQuery() {
    },
    handleAdd() {
      this.title = '新增订单'
      this.open = true;
      this.isEdit = false;
    },
    handleUpdate(row) {
      this.title = '编辑订单'
      this.open = true;
      this.isEdit = false;
      this.form = row;
    },
    handleAddComm(){
      this.titleComm = '新增订单明细'
      this.openComm = true;
    },
    handleUpdateComm(row){
      this.titleComm = '编辑订单明细'
      this.openComm = true;
      this.formComm = row;
    },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
    showTab(row) {
      this.showCard = true
    },
    handleAddBOM(){
      this.resetFormBOM();
      this.titleBOM = '新增BOM'
      this.openBOM = true;
    },
    handleAddBOM1(row){
      this.resetFormBOM();
      this.isParent = true;
      this.formBOM.parent = row.id;
      this.titleBOM = '新增BOM'
      this.openBOM = true;
    },
    handleUpdateBOM(row){
      this.titleBOM = '编辑BOM'
      this.openBOM = true;
      this.formBOM = row;
    },
    submitFormBOM(){
      this.openBOM = false;
    },
    cancelBOM(){this.openBOM = false;},
    handleAddTech(){
      this.resetFormTech();
      this.titleTech = '新增工艺'
      this.openTech = true;
    },
    handleUpdateTech(row){
      this.titleTech = '编辑工艺'
      this.openTech = true;
      this.formTech = row;
    },
    submitFormTech(){
      this.openTech = false;
    },
    cancelTech(){this.openTech = false;},
    handleDelete(row) {
      this.$confirm('确认删除该订单？')
       .then(() => {
          this.orderdata.splice(this.orderdata.indexOf(row), 1)
        })
       .catch(() => {
        })
    },
    handleDeleteComm(row) {
      this.$confirm('确认删除该订单明细？')
       .then(() => {
          this.detailedData.splice(this.detailedData.indexOf(row), 1)
          console.log(this.detailedData);
          
        })
       .catch(() => {
        })
    },
    handleDeleteBOM(row) {
      this.$confirm('确认删除该BOM？')
       .then(() => {
          this.BOMData.splice(this.BOMData.indexOf(row), 1)
        })
       .catch(() => {
        })
    },
    handleDeleteTech(row) {
      this.$confirm('确认删除该工艺？')
       .then(() => {
          this.techData.splice(this.techData.indexOf(row), 1)
        })
       .catch(() => {
        })
    },
    handleDeleteMaterial(row) {
      this.$confirm('确认删除该物料？')
       .then(() => {
          this.materialData.splice(this.materialData.indexOf(row), 1)
        })
       .catch(() => {
        })
    },
    handleAddMaterial(){
      this.resetFormMaterial();
      this.titleMaterial = '新增物料'
      this.openMaterial = true;
    },
    handleUpdateMaterial(row){
      this.titleMaterial = '编辑物料'
      this.openMaterial = true;
      this.formMaterial = row;
    },
    submitFormMaterial(){
      this.openMaterial = false;
    },
    cancelMaterial(){this.openMaterial = false;},
    // 订单重置
    resetForm() {
      this.form = {
        contractDate: '',
        salesperson: '',
        Contract: '',
        customer: '',
        OrderNumber: '',
        OrderType: '',
        AuditLevel: '',
      }
    },
    // 明细重置
    resetFormComm() {
      this.formComm = {
        id: '',
        name: '',
        size: '',
        company: '',
        Packing: '',
        quantity: '',
        remarks: '',
      }
    },
    // BOM重置
    resetFormBOM() {
      this.formBOM = {
        id: '',
        name: '',
        process: '',
        attribute: '',
        color: '',
        weight: '',
        Specifications: '',
        type: '',
        mainUnit: '',
        subUnit: '',
        lossRate: '',
        department: '',
        edition: '',
        parent: '',
      }
    },
    // 工艺重置
    resetFormTech() {
      this.formTech = {
        id: '',
        name: '',
        process: '',
        attribute: '',
        color: '',
        weight: '',
        Specifications: '',
        type: '',
        mainUnit: '',
        subUnit: '',
        lossRate: '',
        department: '',
        edition: '',
        parent: '',
      }
    },
    // 物料重置
    resetFormMaterial() {
      this.formMaterial = {
        orderNumber: '',
        contractNumber: '',
        code: '',
        name: '',
        size: '',
        color: '',
        unit: '',
        quantity: '',
        attribute: '',
        isCustomer: "否",
      }
    },
  }
}
</script>
